@extends('layouts.userctl')
@section('content')
<style>
	.formpage {
		width: 60%;
		height: auto;
		margin: 10px auto;
	}

	.layui-form-label {
		width: 150px;
	}

	.layui-input-block {
		margin-left: 150px;
	}
</style>
<div class="formpage">
	<form class="layui-form" action="{{route('admin.user.adduser')}}" method="post"
		onkeypress="return event.keyCode != 13;">
		{{csrf_field()}}
		<div class="layui-form-item">
			<label class="layui-form-label">姓名</label>
			<div class="layui-input-block">
				<input type="text" name="username" required lay-verify="required" placeholder="请输入用户姓名"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">身份证号</label>
			<div class="layui-input-block">
				<input type="text" name="id_card"  placeholder="请输入身份证号"
					autocomplete="off" class="layui-input">   <!--required lay-verify="required"-->
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">手机号</label>
			<div class="layui-input-block">
				<input type="text" name="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">性别</label>
			<div class="layui-input-block">
				<input type="radio" name="sex" value="男" title="男" checked>
				<input type="radio" name="sex" value="女" title="女">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">所属地区</label>
			<div class="layui-input-block" style="display: flex;flex-direction: row;">
				<div class="layui-input-inline" style="flex: 1;">
					<select name="province" lay-filter="provincediv" id="provincediv" lay-search disabled="disabled">
						<option value="">请选择省份</option>
						@foreach($provinces as $p)
						<option value="{{$p['id']}}">{{$p['name']}}</option>
						@endforeach
					</select>
				</div>
				<div class="layui-input-inline" style="flex: 1;">
					<select name="city" lay-filter="citydiv" id="citydiv" lay-search disabled="disabled">
						<option value="">请选择市</option>
						@foreach($citys as $p)
						<option value="{{$p['id']}}">{{$p['name']}}</option>
						@endforeach
					</select>
				</div>
				<div class="layui-input-inline" style="flex: 1;">
					<select name="district" lay-filter="districtdiv" id="districtdiv" lay-search disabled="disabled">
						<option value="">请选择县/区</option>
						@foreach($districts as $p)
						<option value="{{$p['id']}}">{{$p['name']}}</option>
						@endforeach
					</select>
				</div>
				<div class="layui-input-inline" style="flex: 1.5;margin-right: 0;">
					<select name="street" lay-filter="streetdiv" id="streetdiv" lay-search disabled="disabled" >
						<option value="">请选择镇/街道</option>
						@foreach($streets as $p)
						<option value="{{$p['id']}}">{{$p['name']}}</option>
						@endforeach
					</select>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">所属社区</label>
			<div class="layui-input-block">
				<select name="community" lay-filter="communitydiv" id="communitydiv" lay-search 
					@if ($role=='community_admin' ) 
					disabled="disabled" 
					@endif
				>
					<option value="">请选择社区</option>
					@foreach($communitys as $p)
					<option value="{{$p['id']}}">{{$p['name']}}</option>
					@endforeach
				</select>
			</div>
		</div>
		<!-- <div class="layui-form-item">
			<label class="layui-form-label">部门</label>
			<div class="layui-input-block">
				<select name="department_id" id="depdiv">
					<option value="">无</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">岗位</label>
			<div class="layui-input-block">
				<select name="job_id" id="jobdiv">
					<option value="">无</option>
				</select>
			</div>
		</div> -->
		<div class="layui-form-item">
			<label class="layui-form-label">上午上班时间</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" id="mwork" name="mwork" style="width: 200px;">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">上午下班时间</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" id="moffwork" name="moffwork" style="width: 200px;">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">下午上班时间</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" id="awork" name="awork" style="width: 200px;">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">下午下班时间</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" id="aoffwork" name="aoffwork" style="width: 200px;">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">职责描述</label>
			<div class="layui-input-block">
				<input type="text" name="duty" placeholder="请填写职责描述" autocomplete="off"
					class="layui-input">    <!--required lay-verify="required"-->
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button>
				<button class="layui-btn layui-btn-primary" id="backpage">返  回</button>
			</div>
		</div>
	</form>
</div>
<script>
	//Demo
	layui.use('form', function() {
		var form = layui.form
		var laydate = layui.laydate

		laydate.render({
			elem: '#mwork', //指定元素
			type: 'time',
			format: 'H:mm',
			value: '9:00'
		})
		laydate.render({
			elem: '#moffwork', //指定元素
			type: 'time',
			format: 'H:mm',
			value: '12:00'
		})
		laydate.render({
			elem: '#awork', //指定元素
			type: 'time',
			format: 'H:mm',
			value: '14:00'
		})
		laydate.render({
			elem: '#aoffwork', //指定元素
			type: 'time',
			format: 'H:mm',
			value: '17:30'
		})
		var province_code = 370000,
			city_code = 370200,
			district_code = 370212,
			street_code=370212004, community_code
		$('#provincediv').val(province_code)
		$('#citydiv').val(city_code)
		$('#districtdiv').val(district_code)
		$('#streetdiv').val(street_code)
		var role = '{{$role}}'
		if (role == 'community_admin') {
			community_code = '{{$community_code}}'
			$('#communitydiv').val(community_code)
		}
		form.render('select')
		getjobjson()
		//======================2级菜单===================
		form.on('select(provincediv)', function(data) {
			var name = data.elem.selectedOptions[0].text
			var code = data.value
			var s = '<option value="">请选择市</option>'
			if (name == '') {
				$('#citydiv').html(s)
				form.render('select')
			} else {
				$.ajax({
					type: 'POST', //提交方式
					headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
					data: { lvl: 2, code },
					url: '/admin/area/getjson',
					success: function(result) {
						var list = result.data
						$.each(list, function(i, arr) {
							s = s + '<option value="' + arr.id + '">' +
								arr.name + '</option>'
						})
						$('#citydiv').html(s)
						form.render('select')
					}
				})
			}
			$('#districtdiv').html('<option value="">请选择县/区</option>')
			$('#streetdiv').html('<option value="">请选择镇/街道</option>')
			$('#communitydiv').html('<option value="">请选择社区</option>')
			form.render('select')
		})

		//======================3级菜单===================
		form.on('select(citydiv)', function(data) {
			var name = data.elem.selectedOptions[0].text
			var code = data.value
			var s = '<option value="">请选择县/区</option>'
			if (name == '') {
				$('#districtdiv').html(s)
				form.render('select')
			} else {
				$.ajax({
					type: 'POST', //提交方式
					headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
					data: { lvl: 3, code },
					url: '/admin/area/getjson',
					success: function(result) {
						var list = result.data
						// console.log(result);
						$.each(list, function(i, arr) {
							s = s + '<option value="' + arr.id + '">' +
								arr.name + '</option>'
						})
						$('#districtdiv').html(s)
						form.render('select')
					}
				})
			}
			$('#streetdiv').html('<option value="">请选择镇/街道</option>')
			$('#communitydiv').html('<option value="">请选择社区</option>')
			form.render('select')
		})

		//======================4级菜单===================
		form.on('select(districtdiv)', function(data) {
			var name = data.elem.selectedOptions[0].text
			var code = data.value
			var s = '<option value="">请选择镇/街道</option>'
			if (name == '') {
				$('#streetdiv').html(s)
				form.render('select')
			} else {
				$.ajax({
					type: 'POST', //提交方式
					headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
					data: { lvl: 4, code },
					url: '/admin/area/getjson',
					success: function(result) {
						var list = result.data
						$.each(list, function(i, arr) {
							s = s + '<option value="' + arr.id + '">' +
								arr.name + '</option>'
						})
						$('#streetdiv').html(s)
						form.render('select')
					}
				})
			}
			$('#communitydiv').html('<option value="">请选择社区</option>')
			form.render('select')
		})
		//======================5级菜单===================
		form.on('select(streetdiv)', function(data) {
			var name = data.elem.selectedOptions[0].text
			var code = data.value
			street_code = code
			getjobjson()
			var s = '<option value="">请选择社区</option>'
			if (name == '') {
				$('#communitydiv').html(s)
				form.render('select')
			} else {
				$.ajax({
					type: 'POST', //提交方式
					headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
					data: { lvl: 5, code },
					url: '/admin/area/getjson',
					success: function(result) {
						var list = result.data
						$.each(list, function(i, arr) {
							s = s + '<option value="' + arr.id + '">' +
								arr.name + '</option>'
						})
						$('#communitydiv').html(s)
						form.render('select')
					}
				})
			}
			form.render('select')
		})
		

		function getjobjson() {
			// $.ajax({
			// 	type: 'GET', //提交方式
			// 	headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
			// 	data: { province_code, city_code, district_code, street_code, community_code },
			// 	url: '/admin/user/getjobjson',
			// 	success: function(result) {
			// 		var list = result.data
			// 		var s = '<option value="">请选择岗位</option>'
			// 		$.each(list, function(i, arr) {
			// 			s = s + '<option value="' + arr.id + '">' +
			// 				arr.job + '</option>'
			// 		})
			// 		$('#jobdiv').html(s)
			// 		form.render('select')
			// 	}
			// })
			// $.ajax({
			// 	type: 'GET', //提交方式
			// 	headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
			// 	data: { province_code, city_code, district_code, street_code, community_code },
			// 	url: '/admin/user/getdepjson',
			// 	success: function(result) {
			// 		var list = result.data
			// 		var s = '<option value="">请选择部门</option>'
			// 		$.each(list, function(i, arr) {
			// 			s = s + '<option value="' + arr.id + '">' +
			// 				arr.department + '</option>'
			// 		})
			// 		$('#depdiv').html(s)
			// 		form.render('select')
			// 	}
			// })

		}

		$('#backpage').click(function() {
			history.back(-1)
		})
		//监听提交
		form.on('submit(formDemo)', function(data) {
			var index = layer.load(0, { shade: false })
			$('form').find('input,select').removeAttr('disabled')
		})
	})
</script>

@endsection
